import React from 'react';
import { connect } from 'react-redux';
import { ListItem, ListInfo } from '../style';
import { Link } from 'react-router-dom';
class List extends React.Component {
  render() {
    const { list } = this.props;
    return (
      <div>
        {list.map((item, index) => {
          return (
            <Link key={index} to="/detail">
              <ListItem>
                <img alt="alt" className="pic" src={item.get('src')}></img>
                <ListInfo>
                  <h3 className="title">{item.get('title')}</h3>
                  <p className="desc">{item.get('desc')}</p>
                </ListInfo>
              </ListItem>
            </Link>
          );
        })}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    list: state.get('home').get('articleList'),
  };
};
export default connect(mapStateToProps, null)(List);
